<template>
	<view class="page-total" v-show="isPage" @click="hide">
		<view class="dialog" :class="{'show':isShow}">
			<view style="text-align: center;padding: 30rpx 0;">
				<image style="width:75rpx;height:75rpx;" src="../../static/logo.jpg" mode=""></image>
				<view>精装猫基础保障</view>
			</view>
			<view class="serve-list">
				<view class="list">
					<view class="title">
						<u-image width="30rpx" mode="widthFix" src="@/static/zhibao01.jpg"></u-image>
						<text>全程质保</text>
					</view>
					<view class="content">
						<text>货不对板 双倍赔偿</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<u-image width="30rpx" mode="widthFix" src="@/static/zhibao02.jpg"></u-image>
						<text>无接触式服务</text>
					</view>
					<view class="content">
						<text>线上选款下单 避免密接 少一份接触就少一份风险</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<u-image width="30rpx" mode="widthFix" src="@/static/zhibao03.jpg"></u-image>
						<text>漏水险</text>
					</view>
					<view class="content">
						<text>由施工造成漏水而带来的一切损失均由平台先行赔偿</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<u-image width="30rpx" mode="widthFix" src="@/static/zhibao04.jpg"></u-image>
						<text>延时处罚</text>
					</view>
					<view class="content">
						<text>无故延时 按日累计处罚</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>不支持7天退换货</text>
					</view>
					<view class="content">
						<text>此商品不支持七天无理由退换货</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				isPage: false,
			};
		},
		methods: {
			show() {
				this.isPage = true;
				setTimeout(() => {
					this.isShow = true;
				}, 200)
			},
			hide() {
				this.isShow = false;
				setTimeout(() => {
					this.isPage = false;
				}, 200)
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'GoodsServe.scss';
</style>
